/*
    Dashboard Empty State
    ----------------------------------------------------------------------------
*/

.dashboard-empty {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.dashboard-empty--graphic {
  display: inline-flex;
  position: relative;
  width: 50%;
  max-width: 720px;
}

.dashboard-empty--graphic:after {
  content: '';
  display: inline-block;
  // This % ensures proper aspect ratio for the image without using
  // the <img /> element
  padding-bottom: 57.3170731707317%;
}

.dashboard-empty--graphic-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../../assets/images/dashboard-empty--dark.svg');
}

.clockface--app-wrapper.dashboard-light-mode {
  .dashboard-empty--graphic-content {
    background-image: url('../../assets/images/dashboard-empty--light.svg');
  }
  .dashboard-empty .cf-empty-state--text {
    color: $g11-sidewalk;
  }
  .dashboard-empty .cf-empty-state--text strong,
  .dashboard-empty .cf-empty-state--text b {
    color: $g7-graphite;
  }
}
